<template>
<div class="alllist">
  <div class="top-list">
      <div class="is-left" v-show="isLeft">
          <a-icon class="left" type="left" @click="back()" />
          <h1 class="header-title">{{title}}</h1>
          <span @click="Fapiao()" class="size">{{name}}</span>
      </div>
  </div>
  <div class="list">
     <router-link v-for="(item, index) in ArrayData" :key="index" :to="item.path" active-class="current-router">
         <div class="item-name">{{item.name}}</div>
     </router-link>
      </div>
  </div>
</template>

<script>
export default {
props:{
      ArrayData:Array,
      isLeft:{
          type:Boolean,
          default:false,
      },
      title:{
          type:String,
          require:true,
      },
      name:{
          type:String,
          require:true,
      }
  },
methods: {
    Fapiao(){
        this.$router.push('/Fapiao');
    },
    back(){
        this.$router.push('/Me')
    }
},
}

</script>
<style lang="scss" scoped>
// .alllist{
//     height: $list-height;
// }

.top-list{
    align-items: center;
    background-color: #FF6347;
}
.size{
    font-size: 12px;
    padding-right: 10px;
}
.left{
    padding-left: 10px;
    
}
.current-router{
    color: $starbucks-color;
    border-bottom: 3px $starbucks-color solid;
}
.is-left{
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
    padding-bottom: 12px;
    font-size: 18px;
}
.list{
    margin-top: 15px;
    display: flex;
    justify-content: space-around;
    height: 15%;
}
.list::-webkit-scrollbar {
    display: none;
}
.item-name{
    color: black;
}
</style>